<!DOCTYPE html>
<html lang="en">

<head>
    <title>未关闭事项管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_855021_i2jfy4r0uq.css">
</head>

<body>
    <iframe id="ifAttach" style="display:none"></iframe>
    <section class="content" id="app">
        <div>
            <div style="height: 25px;margin-bottom: 10px;">
                <select class="form-control pull-left input-sm" v-model="selectedCompanyId" @change="selCompany" style="width: 120px;height: 25px;font-size: 12px;line-height: 25px;padding-top: 0px;padding-bottom: 0px;padding-left: 6px;margin-right: 5px">
                    <option value="">选择公司</option>
                    <option v-for="(item,i) in companyList" :value="item.id">
                        {{item.name?item.name:item.allName}}
                    </option>
                </select>
                <input type="text" placeholder="关键字" id="txtParent" class="form-control pull-left input-sm" style="width: 200px;"
                    v-model="keyWord">
                <button type="button" class="btn oaBtn btn-sm pull-left" style="margin-left: 10px;" @click="search">
                    查询
                </button>
                <input type="button" value="添加未关闭事项" class="btn oaBtn btn-sm pull-right" @click="showDialog('add',0)">
            </div>
            <div class="box-body no-padding box-border" style="overflow: auto;background: #fff;border:0;">
                <div class="box-body no-padding iframeHUnclosed" style="overflow: auto;" id="scrollDiv">
                    <div v-if="isEmptyData" style="height:100;font-size:40px;text-align: center;">暂无数据</div>
                    <table class="table table-hover table-s">
                    <template v-for="item,i in list" >
                        <tr class="list">
                            <td class="main-info">
                                <p class="title" :title="item.TRACK_TITLE">{{(i+1)+((pageIndex-1)*30)}}、{{item.TRACK_TITLE}}</p>
                                <div class="tip-box">
                                    <i class="up-arrow"></i>{{item.sn}}、{{item.TRACK_TITLE}}
                                </div>
                                
                                <p class="track-content" v-for="lineContent in item.contentList">{{lineContent}}</p>
                            </td>
                            <td class="attcach-list" style="width: 150px; padding: 1px 1px 0;vertical-align: top;text-align: center">
                                <div :data-ii="item.attachesOpen" :style="'height: 63px;' + (item.attachesOpen == 1 ? '' : 'overflow: hidden') ">
                                    <div v-for="(attcach,i) in item.attaches" class="fj-tanzhongStyle"  :title="attcach.name">
                                        <b :class="fjStyle(attcach.name)"></b>
                                        <div class="name" v-if="attcach.name">
                                            {{attcach.name}}
                                        </div>
                                        <div class="down">
                                            <a href="javascript:void(0)" class="nui-txt-link" @click="download(attcach.url,attcach.name)">下载</a>
                                        </div>
                                    </div>
                                </div>
                                <span v-if="item.attaches.length>2" :class="'iconfont ' + (item.attachesOpen == 1 ? 'icon-shouqi' : 'icon-zhankai') " @click="toggleAttcach(item)"></span>
                            </td>
                            <td class="minor-info">
                                <p><span class="info-w">发起时间：{{item.CREATE_TIME}}</span>预计结束日期：{{item.PREDICT_TIME}}</p>
                                <p><span class="info-w"><span class="wl">发起</span>人：{{item.USER_NAME}}</span><span class="wl1">负责</span>人：{{item.PRINCIPAL_NAME}}</p>
                                <p :title="item.cyrName"><span class="wl">参与</span>人：{{item.cyrName}}</p>
                                <p :title="item.csrName"><span class="wl">抄送</span>人：{{item.csrName}}</p>
                            </td>
                            <td class="operating" v-show=" item.JOB_STATE==0">
                                <p @click="closeMatter(item)" v-if="currentUser.id==item.USER_ID || currentUser.id==item.PRINCIPAL">关闭</p>
                                <p @click="addTrack(item)">回复</p>
                            </td>
                            <td class="operating" v-show=" item.JOB_STATE==1">
                                已关闭
                            </td>
                        </tr>
                        <!-- <tr class="attcach-list" v-if="item.attaches.length>0">
                            <td colspan="3" style="position: relative;">
                                <div :data-ii="item.attachesOpen" :style="'height: 31px;' + (item.attachesOpen == 1 ? '' : 'overflow: hidden') ">
                                    <div v-for="(attcach,i) in item.attaches" class="fj-tanzhongStyle"  :title="attcach.name">
                                        <b :class="fjStyle(attcach.name)"></b>
                                        <div class="name" v-if="attcach.name">
                                            {{attcach.name}}
                                        </div>
                                        <div class="down">
                                            <a href="javascript:void(0)" class="nui-txt-link" @click="download(attcach.url,attcach.name)">下载</a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td style="text-align: center;padding-top: 1px;">
                                <span :class="'iconfont ' + (item.attachesOpen == 1 ? 'icon-shouqi' : 'icon-zhankai') " @click="toggleAttcach(item)"></span>
                            </td>
                        </tr> -->
                        <tr class="list-track">
                            <td colspan="3" style="padding:5px;border-left: 1px solid #ddd;border-bottom:1px solid #ddd;">
                                <transition name="mybox">
                                <div :style="'float: left;width: 100%;overflow: hidden;'+ (item.btnOp==1 ? 'min-height:110px;height:auto' : 'height:110px')">
                                    <div v-for="trackItem,ti in item.trackList" :key="trackItem.index"  style="line-height: 22px;display: inline-flex;width: 100%">
                                        <span class="user">{{trackItem.USER_NAME}} {{trackItem.CREATE_TIME}} :</span>
                                        <p class="track-info">{{trackItem.TRACK_CONTENT}}</p>
                                    </div>
                                </div>
                                </transition>
                            </td>
                            <td style="text-align: center;border-bottom:1px solid #ddd;border-right:1px solid #ddd;">
                                <span class="iconfont icon-zhankai" :data-index="i" @click="moreTrack(i,item)" v-if="item.btnOp==0"></span>
                                <span class="iconfont icon-shouqi" :data-index="i" @click="closeTrack(i,item)" v-if="item.btnOp==1"></span>
                            </td>
                        </tr>
                        <tr v-if="list.length-1 != i">
                            <td colspan="3" style="height:10px;"></td>
                        </tr>
                    </template>
                    </table>
                </div>
            </div>

        </div>

        <div class="oa-pager text-center" style="margin-top: 5px;">
            共
            <span id="allCount"> 0 </span>条记录&nbsp;&nbsp;&nbsp;
            <span id="nowPage"> 1 </span>/<span id="allPage">1</span>&nbsp;&nbsp;&nbsp;
            <span class="oa-pager-button" id="first">首页</span>
            <span class="oa-pager-button" id="prev">上一页</span>
            <span class="oa-pager-button" id="next">下一页</span>
            <span class="oa-pager-button" id="last">尾页</span>
        </div>

    </section>
    <script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
    <!--插件JS-->
    <script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
    <!--框架已定义 JS-->
    <script src="/dist/js/app_iframe.js?t=8e743a31"></script>
    <!--oa自定义  JS-->
    <script src="/dist/js/oa.js?t=54c6b89c"></script>
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
    <script type="text/javascript" src="/dist/plugins/select2/select2.full.min.js"></script>
    <style type="text/css">
        .content {
            padding: 8px 8px 0 8px;
        }
        .tip-box {
            background-color: #d3e8fd;
            position: absolute;
            width: 99%;
            left: 0;
            padding: 5px;
            z-index: 1;
            display: none;
        }
        .tip-box .up-arrow {
            display: inline-block;
            position: absolute;
            top: -5px;
            left: 40px;
            border-width: 0 6px 5px;
            border-style: solid;
            border-color: transparent transparent #d3e8fd;
        }
        .fj-tanzhongStyle{
            width: 145px;
        }
        .fj-tanzhongStyle .name{
            width: 70%;
            height: 14px;
            line-height: 13px;
        }
        .mybox-leave-active,.mybox-enter-active{
            transition:all 0.5s ease;
        }
        .mybox-leave-active,.mybox-enter{
            height:0px !important;
        }
        .mybox-leave,.mybox-enter-active{
            height: 150px;
        }
        a { cursor: pointer}
        p { margin: 0;}

        .table-s {border: 0px}

        .table-s td {
            border-top: 0 !important;
            height: 24px;
        }

        .table-s .list:hover,
        .table-s .list-track:hover {
            background-color: #fff !important;
        }

        .table-s .list td {
            background-color: #ccc  !important;
            padding: 5px;
            /* border-bottom: 1px solid #ffffff; */
        }

        .table-s .list .main-info{
            width: 60%;
            vertical-align: top;
            border-left: 1px solid #ddd;
            position: relative;
        }
        .table-s .list .main-info .title{
            font-weight: bold;
            font-size: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .table-s .list .minor-info{
            color: #999;
            width: 400px;
        }
        .table-s .list .minor-info p{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 395px;
        }
        .table-s .list .operating{
            width: 50px;
            text-align: center;
            border-right: 1px solid #ddd
        }
        .table-s .list .operating p{
            cursor: pointer;
            color: #69b0f3;
            line-height: 25px;
        }

        .table-s .list .info-w{
            display: inline-block;
            width: 210px
        }
        .table-s .list .minor-info .wl{
            letter-spacing:6px;
        }
        .table-s .list .minor-info .wl1{
            letter-spacing:18px;
        }

        .table-s .list-track td{
            padding: 5px
        }

        .table-s .list-track .user{
            text-decoration: underline;
            color: #999;
            float: left
        }
        .table-s .list-track .track-info{
            padding-left: 5px;
            width: 83%;
            float: left;
        }

        .icon-zhankai,.icon-shouqi{
            cursor: pointer;
            color: #69b0f3;
            font-size: 18px;
            border: 1px solid;
            border-radius: 5px;
        }

        .attcach-list .icon-zhankai,.attcach-list .icon-shouqi{
            font-size: 18px;
            line-height: 12px;
            border: 0;
        }
        
    </style>
    <script>
        function refresh(toStart) {
            if(toStart)
                app.pageIndex=1;
            app.refresh()
        }


    </script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                currentUser: getCurrentUser(),
                pageIndex: 1,
                pageCount: 1,
                recordCount: 1,
                list: [],
                keyWord: "",
                selectedCompanyId:"",
                isEmptyData:false,
                companyList: []
            },
            methods: {
                refresh: function () {
                    $.wyui.page.queryParams.requestPage=this.pageIndex;
                    $.wyui.page.queryParams.keyWord=this.keyWord;
                    $.wyui.page.queryParams.userId=this.currentUser.id;
                    $.wyui.page.queryParams.selectedCompanyId=this.selectedCompanyId;
                    $.wyui.page.getByPage();


                },
                search: function () {
                    this.pageIndex = 1;
                    this.refresh();
                },
                pagination: function (auction) {
                    if (auction == "first")
                        this.pageIndex = 1;
                    else if (auction == "next" && this.pageIndex < this.pageCount)
                        this.pageIndex += 1;
                    else if (auction == "pre" && this.pageIndex > 1)
                        this.pageIndex -= 1;
                    else if (auction == "last")
                        this.pageIndex = this.pageCount;
                    this.refresh();
                },
                closeMatter:function(item){
                    if(confirm("确定关闭该事项？")){
                        $.wyui.postMethod(urlConfig.wreport.wreportUnfinish.closeMatter, {
                            id: item.ID
                        }, function (data) {
                            this.refresh();
                        });
                    }
                },
                addTrack:function(item){
                    var sTitle = trimRN2(item.TRACK_TITLE)==''?'添加跟踪':'添加跟踪（' + item.TRACK_TITLE.substring(0,25)+ '）';
                    var userName = this.currentUser.name;
                    $.dialog({
                        content: 'url:addTrack.html?mainId=' + item.ID+'&userName=' + userName + '&principal=' + item.PRINCIPAL + '&publisher=' + item.USER_ID + '&trackTitle=' + item.TRACK_TITLE.substring(0,25),
                        title: sTitle,
                        width: 700,
                        height: 250,
                        max: false,
                        min: false,
                        lock: true
                    });
                },
                addReply:function(item){
                    $.dialog({
                        content: 'url:addReply.html?trackId=' + item.ID,
                        title: '回复跟踪（'+item.USER_NAME + new Date(item.CREATE_TIME).Format("MM-dd hh:ss")+'）',
                        width: 700,
                        height: 250,
                        max: false,
                        min: false,
                        lock: true
                    });
                },
                showDialog: function (pageType, item) {
                    var condition ="";
                    if(pageType == "edit"){ 
                        condition += "&id="+item.ID;
                        condition += "&userId="+item.USER_ID;
                        condition += "&principal=" + item.PRINCIPAL;
                        condition += "&principalName=" + item.PRINCIPAL_NAME;
                        condition += "&csrPerson=" + (item.csr == undefined?"":item.csr);
                        condition += "&cyrPerson=" + (item.cyr == undefined?"":item.cyr);
                        condition += "&csrPersonName=" + (item.csrName == undefined?"":item.csrName);
                        condition += "&cyrPersonName=" + (item.cyrName == undefined?"":item.cyrName);
                        condition += "&trackTitle=" + item.TRACK_TITLE;
                        condition += "&trackContent=" + item.TRACK_CONTENT;
                        condition += "&predictTime=" + (item.PREDICT_TIME==""?"":new Date(item.PREDICT_TIME).Format("yyyy-MM-dd")); 
                    }
                    $.dialog({
                        content: 'url:detail.html?pageType=' + pageType + (condition == "" ? "" : condition),
                        title: '添加未关闭事项',
                        width: 700,
                        height: 340,
                        max: false,
                        min: false,
                        lock: true
                    });
                },
                selCompany:function(val){
                    this.refresh();
                },
                moreTrack: function (i, item) {
                    var that = this;
                    item.btnOp = 1;
                },
                closeTrack: function (i, item) {
                    item.btnOp = 0;
                },
                toggleAttcach:function(item){
                    if(item.attachesOpen == 1)
                        item.attachesOpen = 0;
                    else
                        item.attachesOpen = 1;

                },
                moreReply: function (item) {
                    item.btnReply = 1;
                    if (item.replayList.length == 0) {
                        item.replayList = [];
                        $.wyui.postMethod(urlConfig.wreport.wreportUnfinish.getWReportUnfinishReply, {
                            trackId: item.ID
                        }, function (data) {
                            for (var i = 0; i < data.length; i++) {
                                var reply = new Object();
                                reply.REPLY_CONTENT = data[i].REPLY_CONTENT;
                                reply.USER_NAME = data[i].USER_NAME;
                                reply.CREATE_TIME = data[i].CREATE_TIME;
                                item.replayList.push(reply);
                            }
                        });
                    }
                },
                closeReply: function (item) {
                    item.btnReply = 0;
                },
                download: function (attachId, fileName) {
                    downloadFile(attachId,fileName)
                    return false;
                },
                fjStyle: function (fjName) {
                    if (fjName) {
                        var type = fjName.substring(fjName.lastIndexOf('.') + 1);
                        return 'img fj-' + type
                    }
                    return 'img'
                }
            },
            mounted: function () {

                var that = this;
                var H = $(window).height();
                $(".iframeHUnclosed").height(H - 73);
                $.wyui.postMethod("/company/getCompanyList.json", {userId: getCurrentUser().id}, function (data) {
                    that.companyList = data;
                });
                $.wyui.page.dataUrl = server.ip + urlConfig.wreport.wreportUnfinish.getWReportUnfinishMainList;
                $.wyui.page.queryParams.requestPage=this.pageIndex;
                $.wyui.page.queryParams.keyWord=this.keyWord;
                $.wyui.page.queryParams.selectedCompanyId=this.selectedCompanyId;
                $.wyui.page.queryParams.userId = $.wyui.page.urlParams.userId ? $.wyui.page.urlParams.userId : getCurrentUser().id;
                $.wyui.page.getByPage_callback = function (records) {
                    for (var i = 0; i < records.length; i++) {
                        records[i].btnOp = 0;
                        records[i].contentList = records[i].TRACK_CONTENT.split("\n");
                        records[i].attachesOpen = 0;
                    }
                    that.list = records;
                    if(that.list.length == 0)
                        that.isEmptyData = true;
                    else
                        that.isEmptyData = false;

                    // that.list = records;
                    
                    that.pageIndex=$("#nowPage").text();
                };
            }
        });
        $(window).resize(function () {
            var H = $(window).height();
            $(".iframeHUnclosed").height(H - 73);
        })

    </script>
    <script type="text/javascript">
    $(function(){
        $("#app").on("click",".title",function(){
            $(this).next().toggle();
        });
    });
    </script>
</body>

</html>